@import '~@angular/material/theming';

// Mixin to apply theme colors for generated API docs.
@mixin docs-site-api-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  @if $is-dark-theme {
    .docs-api-method-name-cell {
      color: mat-color($primary, 200);
    }

    .docs-api-method-returns-type,
    .docs-api-method-parameter-type {
      color: mat-color($primary, 200);
    }
  } @else {
    .docs-api-method-name-cell {
      color: mat-color($primary, 800);
    }

    .docs-api-method-returns-type,
    .docs-api-method-parameter-type {
      color: mat-color($primary, darker);
    }
  }

  .docs-api-async-method-marker {
    $async-method-marker-hue: if($is-dark-theme, 200, 400);
    background-color: mat-color($primary, $async-method-marker-hue);
    color: mat-color($primary, '#{$async-method-marker-hue}-contrast');
  }

  // Force the top-level API docs header to be hidden, since this is already
  // captured in the top nav-bar.
  .docs-api-h1 {
    display: none !important;
  }

  // Prevent p tags from not breaking, causing x axis overflows.
  .docs-api > p {
    word-break: break-word;
  }

  .docs-api-class-name,
  .docs-api-module-import,
  .docs-api-class-selector-name,
  .docs-api-class-export-name {
    background: rgba(mat-color($foreground, secondary-text), 0.06);
  }
}
